<template>
  <div v-if="hasAbnormal" class="abnormal-info" @click="handleViewAll">
    <div>
      监测<span style="font-weight: bold">{{ info?.total }}</span
      >项指标中，异常指标<span class="color-red" style="font-weight: bold">{{
        info?.anomalyIndex
      }}</span
      >项。
    </div>
    <div>查看全部 ></div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import type { IAbnormalInfo } from '../index.vue'

interface IProps {
  info: IAbnormalInfo | null
}

defineOptions({
  name: 'AbnormalInfo'
})

const router = useRouter()

const props = withDefaults(defineProps<IProps>(), {
  info: null
})

const hasAbnormal = computed(() => {
  return !!props.info && props.info.anomalyIndex > 0
})

const handleViewAll = () => {
  router.push('/anomalyIndex')
}

// QuotaServe.getAbnormalInfo(type)
</script>

<style lang="less" scoped>
.abnormal-info {
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
  align-items: center;
  height: 26.28px;
  padding: 0px 15.38px;
  font-size: 11.54px;
  background: rgba(255, 185, 185, 1);
  color: rgba(68, 68, 68, 1);
  .color-red {
    color: rgba(255, 61, 0, 1);
  }
}
</style>
